<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例二：亲润官方商城左侧菜单</title>
</head>
<style type="text/css">
    *{margin: 0;padding: 0}
    body{font: 14px/1.5 "微软雅黑"}
    .menu{width: 200px;height:600px;border: 1px solid #bf0000;margin: 30px 0px 0px 100px;}
    .menu .allgoods{width: 100%;height: 35px;background: #bf0000;font-size: 16px;color: #fff;text-align: center;line-height: 35px;}
    .menu dl{width: 160px;background: url("images/line.gif") no-repeat left bottom;padding: 10px 20px;}
    .menu dl dt{height: 33px;background: #00cc33;font-size: 14px;font-weight: bold;line-height: 33px;text-indent: 30px;} /*text-indent 段落缩进30px*/
    .menu dl dd{font-size:12px;}
    .menu dl dt.bg1{background: url("images/face.png") no-repeat left center;}  /*设置背景图片 地址+放置方式+坐标*/
    .menu dl dt.bg2{background: url("images/body.png") no-repeat left center;}
    .menu dl dt.bg3{background: url("images/pro.png") no-repeat left center;}
    .menu dl dt.bg4{background: url("images/wen.png") no-repeat left center;}
    .menu dl dt a{color: #333;text-decoration: none;}
    .menu dl dd p{line-height: 30px;}
    .menu dl dd a{color: #666;text-decoration: none;padding-right: 5px;}
    .menu dl dd a:hover{color: #bf0000;text-decoration: underline;}
    .menu dl dd a.ys{color: #bf0000}


</style>
<body>
<div class="menu">
    <div class="allgoods">全部产品</div>

    <dl>
        <dt class="bg1"><a href="#">产口系列</a></dt>
        <dd>
            <p><a href="" class="ys">豆乳补水</a><a href="">大米修复</a><a href="">樱花褪黄</a></p>
            <p><a href="">小麦清润</a><a href="" class="ys">苹果籽-孕纹护理</a></p>
            <p><a href="">洋甘菊-舒缓修复</a><a href="">其他单品</a></p>
        </dd>
    </dl>
    <dl>
        <dt class="bg2"><a href="#">产品功效</a></dt>
        <dd>
            <p><a href="" class="ys">保湿补水</a><a href="">美白亮肤</a><a href="">控油</a></p>
            <p><a href="">紧致抗皱</a><a href="" class="ys">妊娠纹-防护</a></p>
            <p><a href="">舒缓敏感</a><a href="">眼部护理</a><a href="">护唇</a></p>
        </dd>
    </dl>

    <dl>
        <dt class="bg3"><a href="#">面部护理</a></dt>
        <dd>
            <p><a href="" class="ys">洁面</a><a href="">水</a><a href="">眼霜</a><a href="">精华液</a><a href="">乳液</a></p>
            <p><a href="">小麦清润</a><a href="">苹果籽-孕纹护理</a></p>
            <p><a href="">洋甘菊-舒缓修复</a><a href="">其他单品</a></p>
        </dd>
    </dl>

    <dl>
        <dt class="bg4"><a href="#">身体护理步骤</a></dt>
        <dd>
            <p><a href="" class="ys">洗发护发</a><a href="">身体洗护</a><a href="">孕纹护理</a></p>
        </dd>
    </dl>
</div>
</body>
</html>